<template>
  <div class="container">
    <el-card class="box-card" :body-style="{ paddingTop: '10px' }">
      <el-row type="flex" justify="end" class="is-light">
        <el-button @click="routeSkip" type="success" icon="el-icon-edit"
          >新增按钮</el-button
        >
      </el-row>
      <el-form size="mini" ref="formData1" :model="formData">
        <el-row type="flex">
          <el-form-item label="学科" label-width="80px" style="width: 25%">
            <el-select v-model.trim="formData.subject" :value="subject.value">
              <el-option
                :value="item.label"
                :label="item.label"
                v-for="item in subject"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录" label-width="80px" style="width: 25%">
            <el-select value="" v-model="formData.catalogue">
              <el-option
                :value="item.id"
                :label="item.directoryName"
                v-for="item in catalogue.items"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" label-width="80px" style="width: 25%">
            <el-select value="" v-model="formData.label">
              <el-option
                :value="item"
                :label="item.label"
                v-for="item in tagsList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" label-width="80px" style="width: 25%">
            <el-input v-model="formData.keyword"></el-input>
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="试题类型" label-width="80px" style="width: 25%">
            <el-select value="shangh" v-model="formData.questionType2">
              <el-option
                :value="item.value"
                :label="item.label"
                v-for="item in type"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" label-width="80px" style="width: 25%">
            <el-select value="" v-model="formData.difficulty">
              <el-option
                :value="item.value"
                :label="item.label"
                v-for="item in complexity"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" label-width="80px" style="width: 25%">
            <el-select value="" v-model="formData.direction">
              <el-option
                :value="index"
                :label="item"
                v-for="(item, index) in future"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人" label-width="80px" style="width: 25%">
            <el-select value="" v-model="formData.entryClerk">
              <el-option value="1" label="录入管理员"></el-option>
              <el-option value="2" label="超级管理员"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="题目备注" label-width="80px" style="width: 25%">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="企业简称" label-width="80px" style="width: 25%">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="城市" label-width="80px" style="width: 25%">
            <el-select class="city" style="width: 49%" v-model="city">
              <el-option
                :value="item"
                :label="item"
                v-for="item in provinces"
                :key="item"
              ></el-option>
            </el-select>
            <el-select value="" style="width: 49%" v-model="formData.city2">
              <el-option
                :value="items"
                :label="items"
                v-for="items in citys"
                :key="items"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width: 25%">
            <el-row type="flex" justify="end">
              <el-button @click="clearForm">清除</el-button>
              <el-button @click="searchBtn" type="primary">搜索</el-button>
            </el-row>
          </el-form-item>
        </el-row>
      </el-form>

      <el-alert title="消息提示的文案" type="info" show-icon :closable="false">
      </el-alert>

      <el-table :data="arr" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="150">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="150">
        </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型"> </el-table-column>
        <el-table-column prop="question" label="题干" width="250">
        </el-table-column>

        <el-table-column prop="addDate" label="录入时间"> </el-table-column>
        <el-table-column prop="difficulty" label="难度"> </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <!-- <el-row type="flex" > -->
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="small"
              plain
              icon="el-icon-view"
              circle
              @click="preview(row.id)"
            ></el-button>
            <el-button
              type="success"
              size="small"
              plain
              icon="el-icon-edit"
              circle
              @click="routeSkip(row.id)"
            ></el-button>
            <el-button
              type="info"
              size="small"
              plain
              icon="el-icon-delete"
              circle
              @click="deleteBtn(row.id)"
            ></el-button>
            <el-button
              plain
              size="small"
              type="warning"
              icon="el-icon-check"
              circle
              @click="choiceAdd(row.id)"
            ></el-button>
          </template>
          <!-- </el-row> -->
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :page-size="page.pagesize"
          :current-page="page.page"
          :total="page.total"
          :page-sizes="page.pageSizes"
          @current-change="changePage"
          @size-change="sizeChange"
        >
          <!-- @size-change='sizeChange' -->
        </el-pagination>
      </el-row>
    </el-card>
    <dialogPreview
      :showDialog="showDialog"
      :previewData="previewData"
      @showDialog2="showDialog = false"
    />
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import dialogPreview from '@/components/dialog-preview'
import { simple } from '@/api/hmmm/subjects'
import { list as catalogueList } from '@/api/hmmm/directorys'
import { simple as tagsList } from '@/api/hmmm/tags'
export default {
  data () {
    return {
      formData: {
        subject: '',
        catalogue: '',
        label: '',
        keyword: '',
        questionType2: '',
        difficulty: '',
        direction: '',
        entryClerk: '',
        topic: '',
        shortenedForm: '',
        city: '',
        city2: ''
      },
      city: '',
      subject: '',
      arr: [],
      page: {
        page: 1, // 当前页码
        pagesize: 5,
        total: 0, // 总数
        pageSizes: [5, 10, 15, 20]
      },
      type: [],
      complexity: [],
      future: [],
      provinces: [],
      citys: [],
      showDialog: false,
      previewData: '',
      arr1: {},
      subject2: '',
      catalogue: {},
      tagsList: {}
    }
  },
  components: { dialogPreview },
  created () {
    this.list()
    this.simple()
  },
  methods: {
    async list () {
      const { data } = await list(this.page, { pagesize: 10 })
      this.arr1 = { ...data }
      this.arr1.items.forEach((item) => {
        if (item.questionType == 1) {
          item.questionType = '单选'
        } else if (item.questionType == 2) {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
        if (item.difficulty == 1) {
          item.difficulty = '简单'
        } else if (item.difficulty == 2) {
          item.difficulty = '一般'
        } else {
          item.difficulty = '困难'
        }
        item.question = item.question.replace('<p>', ' ')
        item.question = item.question.replace('</p>', ' ')
        this.arr.push(item)
      })
      this.page.total = data.counts
      // console.log(this.arr);
    },
    changePage (newPage) {
      // 监听当前点击的页码
      console.log(newPage)
      this.page.page = newPage
      this.arr = []
      this.list()
    },
    sizeChange (value) {
      this.arr = []
      // console.log(value);
      this.page.pagesize = value
      this.list(this.page)
    },
    async preview (id) {
      const { data } = await detail({ id: id })
      console.log(data)
      this.previewData = { ...data }
      this.showDialog = true
    },
    // 简单学科列表
    async simple () {
      const { data } = await simple()
      this.subject = data
      // console.log(this.subject);
    },
    // 加入精选
    async choiceAdd (id) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', {
          type: 'warning'
        })
        // const { data } =
        await choiceAdd({ id: id, choiceState: 1 })
        this.$message.success('加入精选题库成功')
        this.$router.push('/questions/choice')
        // console.log(data);
      } catch (err) {
        console.log(err)
      }
    },
    clearForm () {
      this.formData = {
        subject: '',
        catalogue: '',
        label: '',
        keyword: '',
        questionType2: '',
        difficulty: '',
        direction: '',
        entryClerk: '',
        topic: '',
        shortenedForm: '',
        city: '',
        city2: ''
      }
      this.arr = []
      this.list()
    },
    async searchBtn () {
      if (!this.formData.subject && !this.formData.keyword) return
      const { data } = await list({ pagesize: 10 })
      this.arr1 = data
      this.arr1.items.forEach((item) => {
        if (item.questionType == 1) {
          item.questionType = '单选'
        } else if (item.questionType == 2) {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
        if (item.difficulty == 1) {
          item.difficulty = '简单'
        } else if (item.difficulty == 2) {
          item.difficulty = '一般'
        } else {
          item.difficulty = '困难'
        }
        item.question = item.question.replace('<p>', ' ')
        item.question = item.question.replace('</p>', ' ')
      })
      // console.log(this.arr1);
      this.arr = []
      this.arr1.items.filter((item) => {
        if (item.subject == this.formData.subject) {
          this.arr.push(item)
        }
        if (this.arr.length < this.page.pagesize) {
          this.page = {
            page: 1, // 当前页码
            pagesize: 5,
            total: 1, // 总数
            pageSizes: [5]
          }
        }
      })
    },
    async deleteBtn (id) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?', {
          type: 'warning'
        })
        // const { data } =
        await remove({ id: id })
        // console.log(data);
        this.arr = []
        this.list()
      } catch (err) {
        console.log(err)
      }
    },
    routeSkip (id) {
      // query: { id: id }
      this.$router.push({ path: '/questions/new' })
    },
    async catalogueList (newValue) {
      const { data } = await catalogueList({ subjectID: newValue })
      const list = { data }
      this.catalogue = list.data
      // console.log(newValue);
      // console.log(this.catalogue.items);
    },
    async tagsLists (newValue) {
      const { data } = await tagsList({ subjectID: newValue })
      this.tagsList = data
      // console.log(data);
    }
  },
  watch: {
    city: {
      immediate: true,
      deep: true,
      handler (newValue, oldValue) {
        // console.log(newValue);
        this.citys = citys(newValue)
        if (newValue !== oldValue) {
          this.formData.city2 = ''
        }
        // console.log(this.citys);
      }
    },
    'formData.subject': {
      deep: true,
      handler (newValue, oldValue) {
        console.log(this.subject)
        this.subject.forEach(item => {
          if (item.label === this.formData.subject) {
            this.catalogueList(item.value)
            this.tagsLists(item.value)
          }
        })
        this.formData.catalogue = ''
        this.formData.label = ''
      }
    }
  },
  mounted () {
    this.type = questionType
    this.complexity = difficulty
    this.future = direction
    this.provinces = provinces()
    this.citys = citys(this.provinces)
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 10px;
  .is-light {
    margin: 15px 0;
  }
  .city {
    margin-right: 4px;
  }
  .btn {
    border: 1px solid #000;
  }
  .el-select {
    width: 100%;
  }
}
</style>
